<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      class="headers"
      title="社区"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    >
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
      <template #right>
        <van-icon name="search" size="22" />
      </template>
    </van-nav-bar>
    <!-- 中间主体部分 -->
    <div class="page-body">
      <!-- 1.轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(ad, index) in $store.state.data.ad" :key="index">
          <img v-lazy="ad.image" :alt="ad.desc" />
          <div class="swipe-title">{{ad.title}}</div>
        </van-swipe-item>
      </van-swipe>
      <!-- 2.section导航 -->
      <section-grid></section-grid>
      <!-- 3.最新的帖子 -->

      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <topic-list section="all" usertype="all" topictype="all"></topic-list>
      </van-pull-refresh>
    </div>
    <!-- 底部 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import footer from "../Base/footer";
import section from "../Base/Grid/section";
import topic from "../Base/List/topic";
import { mapMutations } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      isLoading: false,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["open_leftpopup", "close_leftpopup"]),
    onClickLeft() {
      this.open_leftpopup();
    },
    onClickRight() {
      this.$router.push("/search");
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
  components: {
    "my-footer": footer,
    "section-grid": section,
    "topic-list": topic,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-swipe {
  width: 100%;
  height: 250px;
}
.van-swipe-item {
  width: 100%;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.van-swipe-item .swipe-title {
  height: 30px;
  padding: 5px 5px;
  position: relative;
  bottom: 30px;
  text-align: left;
  color: white;
  background-color: rgba(50, 50, 50, 0.4);
}
</style>